<template>
    <div class="mycart">
       <MyHead :title="'我的购物车('+myCarts.length+'件商品)'"></MyHead>
        <div class="cart-box" v-if="myCarts.length > 0">
      <ul class="clist">
        <li class="citem" v-for="(l, i) in myCarts" :key="i">
          <van-checkbox
            v-model="l.checked"
            @change="changeChecked(l, i)"
          ></van-checkbox>
          <van-swipe-cell>
            <van-card
              :num="l.good.price"
              :price="l.good.price * l.value"
              :desc="l.good.shopVO.shopName"
              :title="l.good.name"
              class="goods-card"
              :thumb="l.good.img[0]"
            >
              <template #tags>
                <van-stepper
                  @change="setItemValue(l, i)"
                  v-model="l.value"
                  min="1"
                  integer
                  theme="round"
                  button-size="54"
                />
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                @click="deleteOne(l, i)"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </li>
      </ul>
      <van-submit-bar
        class="submit-box"
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit"
        button-color="#fb7299"
      >
        <van-checkbox v-model="quan">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送,
          <span @click="onClickEditAddress">修改地址</span>
        </template>
      </van-submit-bar>
    </div>
    <div v-else>
      <van-empty image="	https://s1.hdslb.com/bfs/static/bili-kfpt/channel/qq/box/common/assets/images/common/emptyx2.png" 
      description="购物车空空如也"
      />
    </div>

    </div>
</template>

<script>
export default {
  mounted() {
    if (this.userInfo) {
      this.getMyCarts({ phone: this.userInfo.phone });
    }
  },
  computed: {
    quan: {
      get() {
        return (
          this.myCarts.length > 0 && this.myCarts.every((item) => item.checked)
        );
      },
      set(v) {
        console.log(v);
        var list = this.myCarts.map((item) => {
          item.checked = v;
          return item;
        });
        this.changeMyCarts(list);
      },
    },
    total() {
      return this.myCarts.reduce((prev, item) => {
        return prev + (item.checked ? item.good.price * item.value : 0);
      }, 0);
    },
  },
  methods: {
    async changeChecked(l, i) {
      // 修改选择
      console.log(l.checked);
      let res = await this.$ajax.updateCarts(l.id, {
        checked: l.checked,
      });
      // this.$toast("修改成功")
    },
    async setItemValue(l, i) {
      // 修改数量
      console.log(l, i);
      // 后端修改
      let res = await this.$ajax.updateCarts(l.id, {
        value: l.value,
      });
      this.$toast("修改数量成功");

    },
    onSubmit() {
      if (this.total == 0) {
        this.$toast("请你至少选择一个商品进行购买.");
      } else {
        this.$router.push({
          name: "pay",
          query: { total: this.total },
        });
      }
    },
    onClickEditAddress() {
      this.$router.push({
          name: "address",});
    },
    deleteOne(l, i) {
      this.$dialog
        .confirm({
          title: "友情提示",
          message: "你确定要删除这个商品吗?",
        })
        .then(async () => {
          // on confirm
          let res = await this.$ajax.deleteCarts(l.id);
          this.$toast("删除成功");
          this.myCarts.splice(i, 1);
          this.changeMyCarts(this.myCarts);
        })
        .catch(() => {
          // on cancel
        });
    },
  },

};
</script>



<style lang="scss" scoped>

.mycart{
    width:100%;
    height:100%;
    padding-bottom:84px;
    .cart-box{
        height:100%;
        overflow: auto;
        .clist{
            width:100%;
            padding:15px 10px;
            .citem{
                margin-bottom:15px;
                border:1px solid #ddd;
                border-radius: 10px;
                width:100%;
                height:120px;
                padding:10px 6px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                ::v-deep .van-card{
                    padding: 8px 1px;
                    margin-left:0px;
                    width:310px;
                    // background: #fb7299;
                }
                ::v-deep .delete-button{
                    height:100%;
                    right: -1px;
                    color: #fff;
                    background-color: #fb7299;
                    border: 1px solid gold;
                }
            }
        }
    }
}


</style>

